<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定定位技巧2</title>
        <style>
            .mask {
                background-color: rgba(0,0,0,0.3);
                /*使用固定定为 紧贴着html的4个边，就可以与整个页面窗口一样大*/
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
        </style>
    </head>
    <body>
        <!--遮罩层-->
        <div class="mask">小奶狗</div>
        <!--内容-->
        <div>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam aperiam beatae
                blanditiis, doloremque dolores eaque earum eius et excepturi in iste iure modi nesciunt quae quibusdam
                similique, tempore?
            </div>
            <div>Amet animi dolores eius harum mollitia, odio placeat porro provident quasi soluta totam vel velit?
                Dolorem eius eligendi eos fugiat ipsum laboriosam laborum libero minima, provident quia quibusdam saepe
                ut!
            </div>
            <div>Aperiam debitis eius fuga impedit in itaque minus, nesciunt non nulla praesentium quo tempore
                voluptatem voluptates. Earum est inventore natus sunt vel. Alias consequatur dolorem facilis officia
                sequi velit, vitae!
            </div>
            <div>Dolore dolorem nulla possimus quam ratione. Ab aliquid aut beatae consectetur cupiditate distinctio
                dolor dolores excepturi expedita fugit illo illum itaque laudantium magni molestiae neque, porro,
                quisquam sed sunt totam.
            </div>
            <div>A assumenda dolorem doloremque iure nobis nostrum quibusdam rem ut voluptas. Aperiam aspernatur
                commodi, debitis dignissimos eos hic magni neque nihil perspiciatis quas reiciendis reprehenderit
                repudiandae soluta tenetur veniam voluptatibus.
            </div>
            <div>Cum debitis distinctio facilis illum impedit ipsum nobis obcaecati optio, quis vel. Consectetur culpa,
                dignissimos explicabo fuga nisi officiis pariatur quo suscipit tempore voluptatibus. Aliquid delectus
                dolorem non tempore vitae!
            </div>
            <div>Aut beatae dolores placeat quia rerum, veritatis voluptas? Amet architecto blanditiis deserunt est
                facere ipsam itaque mollitia nobis, nostrum pariatur sapiente sequi sint vero? Cum nam obcaecati
                repellendus sed vero!
            </div>
            <div>Accusamus, ad amet at commodi, deserunt dolor ducimus eos expedita hic impedit iste iusto maiores
                numquam officiis optio pariatur perspiciatis quaerat quam qui repellendus sapiente soluta tempora
                tenetur totam ullam?
            </div>
            <div>Ad est eveniet exercitationem, ipsa minima nemo, quaerat quidem quo, sapiente sed sit veniam
                voluptatem. Blanditiis consequuntur, est eveniet, hic id incidunt magni nam nemo non pariatur quam quo
                rem.
            </div>
            <div>Adipisci animi aperiam cumque dolor eligendi eos fuga illo illum itaque maxime modi molestias nemo
                officiis praesentium quam reprehenderit sed temporibus, tenetur unde vitae! Architecto libero nam
                quaerat quis sunt!
            </div>
            <div>Alias, aliquam autem consectetur dicta dignissimos, est explicabo illo impedit odio perspiciatis
                similique, tenetur. Cum dolor eius fugit laboriosam, laborum nesciunt quaerat suscipit! Accusamus dicta
                itaque officiis, vel voluptas voluptatem!
            </div>
            <div>Asperiores dolore facilis quidem. Accusantium alias, asperiores dolorem exercitationem hic in maiores
                necessitatibus nostrum pariatur sapiente. Aliquam dicta excepturi iusto laudantium, nisi placeat rem?
                Consequuntur expedita in maiores vitae voluptates?
            </div>
            <div>At cum deserunt doloremque dolorum earum, eius illum, incidunt inventore iste numquam officia quo quos
                ratione sit tempore. Alias beatae corporis esse ipsam, magni minus optio perferendis rerum saepe sunt.
            </div>
            <div>Accusamus ad architecto at atque consequuntur enim, ipsam modi mollitia nobis placeat quam quas
                reiciendis reprehenderit sed sequi, veniam vitae voluptatum. Aliquam consectetur, laborum magni minima
                quam voluptatibus. A, maiores.
            </div>
            <div>Alias aliquam fugit ipsum necessitatibus omnis placeat porro. Autem consequuntur cumque eveniet
                laboriosam magnam natus non optio porro quam sapiente? A earum et illum natus necessitatibus nobis,
                omnis velit. Dolorum.
            </div>
            <div>Architecto debitis, distinctio, doloremque eius enim fuga illum ipsa, libero magnam mollitia nisi odio
                officiis perferendis quam tempora. Amet culpa dicta nisi nostrum optio praesentium reiciendis rem
                similique totam vitae!
            </div>
            <div>Accusamus architecto debitis dolorum ducimus ex illo iste, itaque iusto placeat qui quis recusandae
                sapiente sed ullam voluptatibus. Assumenda beatae eius fugiat, ipsum labore magnam nostrum quasi rem sit
                voluptatibus.
            </div>
            <div>Blanditiis nostrum reprehenderit velit voluptates! Assumenda, enim labore nam necessitatibus nisi
                officia repudiandae. Beatae debitis earum repellendus sequi similique. Aut dolorum eaque impedit itaque
                modi repellendus rerum sint. Molestias, sint.
            </div>
            <div>Accusamus animi aspernatur aut, commodi eius esse ipsa ipsum, libero, nostrum obcaecati tempore unde
                voluptatibus. Ab accusamus ad asperiores debitis ex illo iure minima nesciunt nobis perspiciatis, sint
                tempora ut?
            </div>
            <div>Aperiam earum eius iure minus nobis numquam sed. Beatae consequatur deserunt exercitationem nulla
                perspiciatis quam qui quod suscipit. Dolorem ea expedita explicabo ipsum itaque magni minima omnis
                perspiciatis soluta vero!
            </div>
            <div>Accusantium cumque, expedita modi mollitia obcaecati quisquam rerum sapiente sequi! Dolorem eius ipsa
                ipsam laborum nam natus odit tempora. Accusamus aperiam deserunt fuga omnis quas quidem sunt suscipit.
                Nostrum, quasi.
            </div>
            <div>Aperiam assumenda dignissimos eum incidunt ipsam itaque possimus! Accusamus architecto at aut
                consequuntur fugiat illum in inventore libero magni molestiae nam nobis officiis perspiciatis provident
                quis quod, reprehenderit tempora temporibus!
            </div>
            <div>Alias aperiam assumenda deleniti, distinctio dolores, eaque explicabo inventore maxime mollitia odio
                officiis quod soluta tempora temporibus, ullam unde voluptas voluptatum. Aspernatur autem excepturi
                impedit labore quas quasi quibusdam, sit.
            </div>
            <div>A aliquid culpa hic maxime mollitia nesciunt quae reiciendis soluta tempora voluptate? Ab accusamus
                consequuntur, deleniti dignissimos eaque facere hic nam numquam porro quae, qui sint ullam vero? Eaque,
                nostrum.
            </div>
            <div>Ab architecto commodi consectetur dicta distinctio est expedita, id inventore ipsa ipsam ipsum modi
                obcaecati recusandae repellat totam? Adipisci aspernatur, fugit in odit praesentium sequi vel. Corporis
                deleniti rerum saepe!
            </div>
            <div>Architecto asperiores dignissimos doloremque ea enim esse, excepturi fuga laudantium magnam
                necessitatibus nihil odio qui quia quibusdam, ratione reprehenderit saepe tempora tenetur voluptatem
                voluptatum. Accusantium asperiores atque laborum optio tempore.
            </div>
            <div>Animi delectus dicta doloribus dolorum explicabo molestias, odit perferendis possimus repellat sit
                suscipit, tempore totam vero. Assumenda fuga fugiat illum in laboriosam modi neque, numquam praesentium
                quos repellendus voluptate voluptates.
            </div>
            <div>Autem, et facilis quasi qui suscipit veritatis vitae? A amet animi doloremque fuga ipsam mollitia quia,
                saepe sed, similique unde voluptates voluptatum! Alias consequuntur eos illo laudantium provident quam
                sit.
            </div>
            <div>Cumque, deleniti dolor ea earum esse eum impedit in incidunt ipsum laudantium libero neque odio odit
                porro quas qui quia quidem, quos ratione reprehenderit, sapiente sequi soluta sunt tempora velit?
            </div>
            <div>Consequuntur ipsum, placeat! Aliquam aspernatur autem consectetur eaque expedita laboriosam laborum sed
                similique sint, unde. Assumenda ea enim eveniet fugiat fugit hic iure nulla quaerat sequi, tempora
                totam, ullam vitae!
            </div>
            <div>Exercitationem mollitia quasi vero. Amet autem corporis deleniti deserunt dignissimos est expedita
                harum in inventore laudantium libero neque nihil, nulla praesentium qui, suscipit tempora, voluptatibus
                voluptatum? Aperiam eveniet quas sed.
            </div>
            <div>Assumenda dolorem, earum laboriosam minus nam recusandae tempore ullam! A adipisci cumque delectus
                illo, molestiae neque nulla praesentium quam quas, qui quos rem, repellat sed sequi voluptates. Illum,
                ipsam, quod!
            </div>
            <div>Accusamus blanditiis consequatur dolor ex laboriosam laborum, laudantium minima nesciunt, perspiciatis,
                quibusdam totam vero vitae voluptatem. Eos facilis, ipsam labore minus nostrum nulla odio quibusdam
                recusandae, reiciendis temporibus vel voluptatibus?
            </div>
            <div>At fugiat iste nihil nisi possimus. Ab eius explicabo iste quos rem rerum sit velit. Culpa doloremque
                dolorum eligendi explicabo maiores minus molestias nisi obcaecati pariatur provident quo, velit,
                voluptatem!
            </div>
            <div>Aperiam architecto enim est illum labore necessitatibus non porro rerum! Ab, expedita laboriosam nemo
                nihil quas sunt temporibus ullam. Alias amet distinctio dolorum fugiat magnam mollitia nam nisi numquam
                veritatis?
            </div>
            <div>Culpa eligendi non repellat totam voluptate! Aliquid beatae consequuntur cumque laboriosam natus
                numquam obcaecati officia optio possimus quae quam, recusandae tempora totam? At culpa, explicabo labore
                nemo obcaecati saepe veritatis!
            </div>
            <div>Accusantium amet consectetur cupiditate eligendi expedita fuga fugit, illum ipsa iure laboriosam
                laborum libero magnam magni molestias nam nesciunt nihil omnis pariatur perferendis possimus quas
                reiciendis rem reprehenderit sapiente voluptatibus!
            </div>
            <div>Ad deleniti doloribus eveniet, excepturi hic laboriosam nesciunt nulla ut. Culpa cum distinctio
                laboriosam nesciunt pariatur suscipit tenetur voluptatem. Architecto eaque ex fugiat fugit iste placeat
                provident, recusandae soluta totam?
            </div>
            <div>At aut consequuntur enim, explicabo illo odit placeat. Aspernatur autem cum doloribus enim fuga hic
                minus nam porro quaerat rerum. Culpa debitis deserunt dolores dolorum esse natus odio perferendis
                quibusdam!
            </div>
            <div>Ad beatae commodi, deleniti dignissimos dolore ea esse harum laudantium molestiae neque nulla
                perferendis placeat reiciendis rem repellat reprehenderit tenetur unde veniam? Accusamus asperiores ea
                inventore non pariatur quaerat totam!
            </div>
            <div>Assumenda ex ipsa, iste minima minus omnis praesentium quasi, quia quis recusandae sapiente,
                voluptates. Dolore, nemo, rerum? Alias dicta ducimus maxime optio repellendus? Dolor eaque error,
                quaerat quia quod voluptatibus.
            </div>
            <div>Adipisci alias dicta doloribus eos ex fugiat, laudantium neque placeat quae ratione rem repudiandae
                sint tempora unde veritatis! Consequuntur corporis cupiditate exercitationem laboriosam magnam non quae
                quibusdam rerum soluta velit!
            </div>
            <div>Adipisci consequatur dolore excepturi exercitationem fuga officia quaerat quod reiciendis soluta
                temporibus? Iure neque placeat quis. Consequuntur, cumque dicta in iure perspiciatis provident ut?
                Exercitationem labore laboriosam neque nobis numquam!
            </div>
            <div>Culpa dicta dignissimos doloribus eligendi eveniet expedita hic inventore ipsum, nulla omnis? Accusamus
                debitis deserunt dicta distinctio dolorum eveniet minima nihil nobis sapiente voluptatum. Accusamus
                exercitationem explicabo iste nulla officiis.
            </div>
            <div>A aspernatur assumenda corporis eligendi natus! Ad blanditiis commodi ea eos esse laboriosam nam natus
                obcaecati officiis, provident qui saepe sint temporibus unde ut! Facilis inventore ipsa nobis quia
                vitae!
            </div>
            <div>Accusamus, adipisci consequatur ipsum laborum nihil provident quo temporibus! Consectetur delectus
                ipsum iure minima quis. Aliquid dolore, doloremque eveniet iure minima necessitatibus nemo neque
                nesciunt nulla numquam perspiciatis, quos saepe?
            </div>
            <div>Alias aspernatur aut consequatur consequuntur delectus dolorum facilis impedit in libero minima
                molestiae quidem quo ratione, repellendus reprehenderit sed voluptas? Deserunt dolor eaque eos ipsam
                libero nihil numquam provident voluptas!
            </div>
            <div>Ipsam necessitatibus, nemo porro repellendus velit voluptates! Animi delectus distinctio dolorem
                dolorum error harum, ipsam iste itaque maxime natus odit officiis placeat possimus ratione recusandae
                sapiente soluta tempora ut voluptas!
            </div>
            <div>Adipisci asperiores blanditiis debitis dolorem esse eveniet fuga itaque labore minima neque officia
                pariatur possimus provident reiciendis, sint, vel voluptates. Esse facilis neque, nesciunt nostrum
                pariatur quidem ut vero vitae.
            </div>
            <div>Aperiam, ducimus facilis. Cumque esse nostrum obcaecati qui quod reprehenderit totam. Cum delectus eum
                molestias non optio sequi veniam. Accusantium illum inventore ipsa ipsam laudantium quae repudiandae
                veritatis voluptas voluptatem.
            </div>
        </div>
    </body>
</html>